<template>
    <main>
        <div class="inner">
            <div id="main" class="pjax">
                <div class="index wrap">
                    <h2 class="divider">置顶文章</h2>
                    <div class="segments sticky">
                        <article-card/>
                    </div>
                    <h2 class="divider">精选分类</h2>
                    <div class="cards">
                        <tag-card/>
                        <tag-card/>
                        <tag-card/>
                    </div>
                    <h2 class="divider">博客列表</h2>
                    <div class="segments posts">
                        <article-card/>
                        <article-card/>
                        <article-card/>
                    </div>
                </div>
                <nav class="pagination">
                    <div class="inner">
                        <span class="page-number current">1</span>
                        <a class="page-number" href="/page/2/">2</a>
                        <a class="page-number" href="/page/3/">3</a>
                        <a class="extend next" rel="next" href="/page/2/">
                            <i class="ic i-angle-right" aria-label="Next page"></i>
                        </a>
                    </div>
                </nav>
            </div>
            <sidebar/>
            <div class="dimmer"></div>
        </div>
    </main>
</template>

<script>
import ArticleCard from "../components/ArticleCard.vue";
import TagCard from "../components/TagCard.vue";
import Sidebar from "../components/Sidebar.vue";
export default {
    name: "MainPage",
    components: {Sidebar, TagCard, ArticleCard}
}
</script>

<style scoped>

</style>
